<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8"/>
    <style>
        html,body{height:100%; width:100%; overflow:hidden; margin:0; padding:0;}
        .cube{
            background: #1cfff3;
            width: 100%;
            height: 100%;
        }

        .canvas{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0%;
            background: #b2caff;
        }
    </style>
</head>
<body>

    <div class="cube" id ="div_id">
        <canvas class="canvas" id="canvas_id" ></canvas>
    </div>
</body>
<script>
    var canvas_fight = document.getElementById("canvas_id");
    var div = document.getElementById("div_id");
    var ctx = canvas_fight.getContext("2d");
    var num = 100;
    var width = 100;
    var height = canvas_fight.height/num;
    var index_fight = 1;
    var time_fight;
    var time_show;
    canvas_fight.width = screen.width;
    canvas_fight.height=screen.height;
    ctx.font="20px Georgia";
    ctx.strokeText("长按屏幕来观看动画",10,50);
    registeTouchEvent();

    function registeTouchEvent(){
        canvas_fight.addEventListener('touchstart',touchDown);
        canvas_fight.addEventListener('touchend',touchUp);
        canvas_fight.addEventListener('touchmove',touchMove);
    }

    function touchDown(){
        if(null == time_fight){
            time_fight = window.setTimeout(function(){
                alert("timefilght go");
                time_show = window.setInterval(function(){
                    if(index_fight > num){
                        clearInterval(time_show);
                    }else{

                        drawByIndex(index_fight);
                        index_fight++;
                    }
                }, 20);
            }, 1000);
        }

    }
    function touchUp(){
        if(time_fight){
            clearTimeout(time_fight);
            time_fight = null;
        }
    }
    function touchMove(){

    }

    function drawByIndex(index){
        var heightTotal = (canvas_fight.height/4/num)*index_fight;
        ctx.save();
        ctx.clearRect(0,0, canvas_fight.width, canvas_fight.height);
        ctx.fillRect((canvas_fight.width - width)/2, (canvas_fight.height - heightTotal),width, heightTotal);
        ctx.restore();
    }

</script>
</html>